


        .beginning{
            position: fixed;
            background: #fff;
            z-index: 30;
            pointer-events: none;
        }
        .beginning.none{
            display: none;
        }
        .beginning.tp{
            width: 100%;
            height: 60vh;
            top: 0px;
            left: 0px;
            overflow: hidden;
            border-bottom: 1px solid #eee;
            transition: all ease-in-out 1.5s 2.3s;
        }
        .beginning.btm{
            left: 0px;
            right: 0px;
            height: 40vh;
            bottom: 0px;
            transition:all ease-in-out 1.2s 2.3s;
        }
        .beginning.btm.first{
            height: 0px;
        }
        .beginning.tp .box{
            align-items: flex-end;
            height: 100%;
        }
        .beginning.tp .box img{
            margin-bottom: 15px;
        }
        .beginning.tp .box i{
            height: 8px;
            background: #fa6a00;
            width: 240px;
            bottom: 0px;
            position: absolute;
            left: calc(50% - 120px);
            transform-origin: left;
            transform: scaleX(0);
            transition: transform ease 1.5s .5s;
        }
        .beginning.tp.first .box i{
            transform:scaleX(1);
        }
        .beginning.tp.first{
            top: -45vh;
            height:20vh;
        }
        
        .leaving{
            position: fixed;
            width: 100%;
            z-index: 18;
            height: 100vh;
            transition:all ease-in-out 1.2s;
            pointer-events: none;
        }
        .leaving.rht{
            background: #f7f7f7;
        }
        .leaving.btm{
            background: #fff;
        }
        .leaving.none{
            display: none;
        }

        @media(max-width:767px){
            .beginning.tp .box img{
                width: 100px;
                margin-bottom: 40px;
            }
            .beginning.tp.first .box i{
                height: 5px;
            }
        }